<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <base th:href="${#request.getContextPath()}+'/'">
    <link rel="stylesheet" href="/static/common/element/index.css"/>
</head>
<body>
<div id="role">
    <template>
        <div style="margin-bottom:10px;">
            <el-input prefix-icon="el-icon-search" style="width: 13%" v-model="queryForm.roleName" placeholder="角色名称"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="submitQueryForm">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="clearQueryForm">重置</el-button>
        </div>
        <div style="margin-bottom:20px;">
            <el-button type="primary" icon="el-icon-circle-plus-outline" v-if="buttonPermissions('/sys/role/add')" @click="openInsertDialog">新增</el-button>
            <el-button type="danger" icon="el-icon-circle-close" v-if="buttonPermissions('/sys/role/delete')" @click="openDeleteDialog">删除</el-button>
        </div>

        <el-table :data="tableData" :row-style="{height:'40px'}" :cell-style="{padding:'0px'}" :header-cell-style="{'text-align':'center'}" style="margin-bottom:10px;font-size: 14px"
                  :default-sort="{prop: 'date', order: 'descending'}" row-key="id" @selection-change="handleSelectionChange" stripe border>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="180" align="center"></el-table-column>
            <el-table-column prop="roleCode" label="角色编码" width="100" align="center"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column label="操作" width="160" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" v-if="buttonPermissions('/sys/role/update')" @click="openUpdateDialog(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background :page-size="10" :total="total" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 50, 100]"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog title="新增" width="70%" :visible.sync="insertDialog" :modal="false" :close-on-click-modal="false" v-if="buttonPermissions('/sys/role/add')">
            <el-form :model="insertForm" ref="insertForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="角色名称" prop="roleName">
                            <el-input v-model="insertForm.roleName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="描述" prop="description">
                            <el-input type="textarea" autosize v-model="insertForm.description" maxlength="250" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-tree :data="menuData" show-checkbox node-key="id" default-expand-all ref="insertTree" :props="defaultProps" prop="menuList"></el-tree>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-circle-close" @click="insertDialog = false">取 消</el-button>
                <el-button icon="el-icon-circle-check" type="primary" @click="insert">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改" width="70%" :visible.sync="updateDialog" :modal="false" :close-on-click-modal="false" v-if="buttonPermissions('/sys/role/update')">
            <el-form :model="updateForm" ref="updateForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="角色名称" prop="roleName">
                            <el-input v-model="updateForm.roleName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="角色编号" prop="roleCode">
                            <el-input v-model="updateForm.roleCode" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="描述" prop="description">
                            <el-input type="textarea" autosize v-model="updateForm.description" maxlength="250" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-tree :data="menuData" show-checkbox check-strictly node-key="id" default-expand-all :default-checked-keys="updateForm.menuList" ref="updateTree" :props="defaultProps"></el-tree>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-circle-close" @click="updateDialog = false">取 消</el-button>
                <el-button icon="el-icon-circle-check" type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
</body>
<script type="text/javascript" src="/static/common/vue/vue.min.js"></script>
<script type="text/javascript" src="/static/common/element/index.js"></script>
<script type="text/javascript" src="/static/common/util/axios.min.js"></script>
<script type="text/javascript" src="/static/common/util/common-util.js"></script>
<script type="text/javascript" src="/static/common/api.js"></script>
<script type="text/javascript" src="/static/common/module/sys/role.js"></script>
</html>
